<template>
  <view class="content">
    <view class="containerBase">
      <video v-if="localStream" ref="localVideo" id="localVideo" :controls="controls" autoplay muted></video>
      <video v-for="item in remoteStreams" :controls="controls" :ref="item.id" :id="item.id" :key="item.id" autoplay muted></video>
    </view>
    <view class="index-container">
      <view class="input-container">
        <input v-model="roomID" placeholder="请输入房间 ID" placeholder-style="color: #b3b3b3; font-size: 14px;" class="room-input" />
        <text class="tip"></text>
      </view>
      <view class="button-container">
        <view>推拉流:</view>
        <button @click="openRoom(1)" class="roomBtn">加入房间(推流)</button>
        <button @click="openRoom(0)" class="roomBtn">加入房间(不推流)</button>
        <button @click="logout" class="roomBtn">退出房间</button>
        <!-- 选择完之后 再推流 -->
        <br />
        <br />
        <view>流媒体:</view>
        <view>
          <label>拉流模式：</label>
          <select class="roomBtn" v-model="playMode">
            <option v-for="item in playModes" :value="item.id" :key="item.id">{{ item.name }}</option>
          </select>
        </view>
        <view>
          <label>声道选择：</label>
          <select class="roomBtn" v-model="channelCount">
            <option v-for="item in channelCounts" :value="item.id" :key="item.id">{{ item.name }}</option>
          </select>
        </view>
        <view>
          <label>视频编码：</label>
          <select class="roomBtn" v-model="videoCodec">
            <option v-for="item in videoCodecs" :key="item.id">{{ item.name }}</option>
          </select>
        </view>

        <br />
        <!-- 选择完之后 实时更新 -->
        <view>设备选择:</view>
        <view>
          <!-- v-model="camera"  -->
          <view>
            <label>摄像头：</label>
            <select class="roomBtn" v-if="devices.cameras" @change="useVideoDevice">
              <option v-for="item in devices.cameras" :value="item.deviceID" :key="item.deviceID">{{ item.deviceName }}</option>
            </select>
          </view>

          <view>
            <label>麦克风：</label>
            <select class="roomBtn" v-model="microphone" v-if="devices.microphones" @change="useAudioDevice">
              <option v-for="item in devices.microphones" :value="item.deviceID" :key="item.deviceID">{{ item.deviceName }}</option>
            </select>
          </view>
          <!-- <view>
            <label>扬声器：</label>
            <select class="roomBtn" v-if="devices.speakers">
              <option v-for="item in devices.speakers" :value="item.deviceID" :key="item.deviceID">{{ item.deviceName }}</option>
            </select>
          </view> -->
        </view>

        <!-- <view>
          <label>操作</label>
          <button @click="getSth()" class="roomBtn">getSth</button>
        </view> -->
      </view>
    </view>
  </view>
</template>

<script>
import { Express } from "../../utils/h5/h5_common"

export default {
  data() {
    return {
      controls: false,
      roomID: "126",
      localStream: null,
      remoteStreams: [],
      express: null,

      devices: {},
      microphone: null,
      camera: null,
      speaker: null,

      playModes: [
        { name: "音视频", id: 1 },
        { name: "音频", id: 2 },
        { name: "视频", id: 3 }
      ],
      playMode: 1,

      channelCounts: [
        { name: "默认", id: 1 },
        { name: "双声道", id: 2 }
      ],
      channelCount: 1,

      videoCodecs: [{ name: "H264" }, { name: "VP8" }],
      videoCodec: "H264"
    }
  },
  watch: {
    remoteStreams(newVal, oldVal) {
      this.renderRemoteVideo()
    }
  },

  methods: {
    async openRoom(type) {
      await this.express.login(this.roomID)
      // 0 不推流 1 推流
      if (type === 1) {
        const createOption = {
          camera: {
            audio: false,
            video: false,
            videoQuality: 4,
            frameRate: 11,
            bitrate: 300,
            width: 320,
            height: 320,
            channelCount: 1,
            ANS: true, // 开启降噪
            AGC: true, // 开启自动增益
            AEC: true // 开启回声消除
          }
        }
        // 1: 音视频 2: 音频 3：视频
        if (this.playMode === 1) {
          createOption.camera.video = true
          createOption.camera.audio = true
        } else if (this.playMode === 2) {
          createOption.camera.audio = true
        } else if (this.playMode === 3) {
          createOption.camera.video = true
        }

        // 单双声道
        createOption.camera.channelCount = this.channelCount

        // 编码方式
        const customPublish = { videoCodec: this.videoCodec }

        this.localStream = await this.express.createStream(createOption, customPublish)
        this.$nextTick(() => {
          this.$refs.localVideo.$refs.video.srcObject = this.localStream // 对 video组件内真实的video元素 进行赋值
          console.log("mytag this.express", this.express)
        })
      }
    },

    renderRemoteVideo() {
      this.$nextTick(() => {
        this.remoteStreams.forEach((streamItem) => {
          this.$refs[streamItem.id][0].$refs.video.srcObject = streamItem
        })
      })
    },

    async logout() {
      if (!this.express.hasLogin) {
        uni.showToast({
          title: "尚未登录",
          duration: 2000,
          icon: "none"
        })
        return
      }
      this.express.logout()
      this.localStream = null
      this.remoteStreams = []
    },

    async getDevice() {
      this.devices = await this.express.enumDevices()
      if (this.devices.cameras && this.devices.cameras.length) {
        this.camera = this.devices.cameras[0].deviceID
      }
      if (this.devices.speakers && this.devices.speakers.length) {
        this.speaker = this.devices.speakers[0].deviceID
      }
      if (this.devices.microphones && this.devices.microphones.length) {
        this.microphone = this.devices.microphones[0].deviceID
      }
      console.log("mytag this.devices.microphones", this.devices.microphones)
      console.log("mytag this.microphone", this.microphone)
    },

    // 切换摄像头
    async useVideoDevice() {
      const res = await this.express.zegoEngine.useAudioDevice(this.localStream, this.camera)
      console.log("mytag useVideoDevice res", res)
    },
    // 切换麦克风
    async useAudioDevice() {
      const res = await this.express.zegoEngine.useAudioDevice(this.localStream, this.microphone)
      console.log("mytag useAudioDevice res", res)
    },

    async initExpress() {
      this.express = new Express()
      this.express.init()
      this.remoteStreams = this.express.remoteStreams
      await this.express.checkSystemRequirements()
      await this.getDevice()
    },
    getSth() {
      console.log("mytag this.microphone", this.microphone)
      console.log("mytag this.express.zegoEngine", this.express.zegoEngine)
    }
  },

  async mounted() {
    this.initExpress()
  },
  beforeDestroy() {}
}
</script>

<style>
.containerBase {
  height: 73vh;
  max-height: 500px;
  padding: 10rpx;
}

video {
  width: 45vw;
  height: 45vw;
  max-width: 200px;
  max-height: 200px;
  margin: 5rpx;
}

.index-container {
  border-top: 1px slategrey solid;
}
.input-container {
  text-align: center;
}
.button-container {
  border-top: 1px slategrey solid;
  padding: 5px 0 0 5px;
}
.room-input {
  height: 80rpx;
  border-bottom: 1px solid rgba(13, 112, 255, 0.5);
}
button[type="primary"] {
  background-color: red;
}

.roomBtn {
  display: inline-block;
  margin: 1vw;
  font-size: 20rpx;
  background: rgba(13, 112, 255, 0.5);
  color: #fff;
  overflow: visible;
}
</style>
